<template>
	<view class="content">
		<!-- <view class="canvas-box">
			<canvas canvas-id="myCanvas" class="canvas" style="width: 750px;height: 1334px;"/>
		</view> -->
		<template v-for="(perm, index) in permInfo.common">
			<view class="share-fixed" v-if="perm.name === 'isShelf' && perm.status === 1">
				<view class="share-profit">
					<image mode="widthFix" class="image" src="@/static/images/integral/succ.png" />
					补贴收益估计：￥{{ goodsInfo.shareMoney | Fixed(2) }}
				</view>
			</view>
		</template>

		<!-- 选择图片 -->
		<view class="select-images">
			<view class="section-title">
				<view class="line"></view>
				<text class="text">选择图片</text>
			</view>
			<view class="images-list">
				<view class="left">
					<view class="select-flag">
						<text class="iconfont icon-gou"></text>
					</view>
					<view class="title">
						<image class="shop-type" src="@/static/icons/taobao.png" v-if="this.goodsInfo.shoptype === 0"></image>
						<image class="shop-type" src="@/static/icons/tmall.png" v-if="this.goodsInfo.shoptype === 1"></image>
						{{ this.goodsInfo.title }}
					</view>
					<view class="price-coupon">
						<view class="price">
							<text class="end-price">券后价¥<text class="text">{{ this.goodsInfo.endPrice }}</text></text>
							<text class="old-price">原价¥<text class="text">{{ this.goodsInfo.price }}</text></text>
						</view>
						<view class="coupon">
							<image class="image" src="@/static/icons/coupon.png"></image>
							<view class="text">¥{{ this.goodsInfo.couponMoney }}</view>
						</view>
					</view>
					<view class="pic-box">
						<image class="image" :src="imgUrl"></image>
						<view class="price">
							券后价
							<view class="text">{{ this.goodsInfo.endPrice }}</view>
						</view>
					</view>
					<view class="qr-code">
						<image class="teach" src="@/static/images/goods/teach.png"></image>
						<image class="code" :src="this.shareQr"></image>
						<canvas canvas-id="qrcode" style="width: 50px;height: 50px;position: fixed;left: -500px;"/>
					</view>
				</view>
				<view class="right">
					<template v-for="(item, index) in images">
						<view class="images-item" @tap="selectPicture(item)" :class="[{ active: item.selectFlag }]" :key="index" v-if="item.imgUrl">
							<image class="image" :src="item.imgUrl" alt="" />
							<view class="select-flag">
								<text class="iconfont icon-gou"></text>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="footer">
				<view class="left">已选<text class="text">{{ selectNum }}</text>张</view>
				<view class="change-qr" @tap="$refs.changePoster.open()">更换二维码主图</view>
			</view>
		</view>

		<!-- 分享文案 -->
		<view class="share-tips">
			<view class="section-title">
				<view class="line"></view>
				<text class="text">下单文案</text>
			</view>
			<textarea class="text-area" :value="message" placeholder="请输入分享文案" @blur="onBlur"/>
			<view class="share-desc">
				<view class="copy" @tap="copyValue">
					复制下单文案
				</view>
			</view>
		</view>

		<!--创建分享-->
		<view class="share-footer"><view class="create-share" @tap="getSharePic">一键分享图片、推广文案</view></view>
		
		<!-- 更换二维码主图 -->
		<popup ref="changePoster" class="change-popup">
			<view class="main">
				<view class="top">
					<text class="iconfont icon-left" @tap="$refs.changePoster.close()"></text>
					<text class="title">更换二维码主图</text>
					<text class="save" @tap="$refs.changePoster.close()">保存</text>
				</view>
				<scroll-view scroll-x="true" class="center">
					<template v-for="(item, index) in images">
						<view class="img-box" @tap="selectPoster(item)" v-if="item.imgUrl" :class="[{ active: item.posterFlag }]">
							<image class="image" :src="item.imgUrl"></image>
							<view class="select-flag">
								<text class="iconfont icon-gou"></text>
							</view>
						</view>
					</template>
				</scroll-view>
				<view class="footer">
					<view class="title">
						<image class="shop-type" src="@/static/icons/taobao.png" v-if="this.goodsInfo.shoptype === 0"></image>
						<image class="shop-type" src="@/static/icons/tmall.png" v-if="this.goodsInfo.shoptype === 1"></image>
						{{ this.goodsInfo.title }}
					</view>
					<view class="price-coupon">
						<view class="price">
							<text class="end-price">券后价¥<text class="text">{{ this.goodsInfo.endPrice }}</text></text>
							<text class="old-price">原价¥<text class="text">{{ this.goodsInfo.price }}</text></text>
						</view>
						<view class="coupon">
							<image class="image" src="@/static/icons/coupon.png"></image>
							<view class="text">¥{{ this.goodsInfo.couponMoney }}</view>
						</view>
					</view>
					<view class="pic-box">
						<image class="image" :src="imgUrl"></image>
						<view class="price">
							券后价
							<view class="text">{{ this.goodsInfo.endPrice }}</view>
						</view>
					</view>
				</view>
			</view>
		</popup>

		<!-- 分享海报预览 -->
		<popup ref="poster" type="bottom">
			<view class="poster-popup" v-if="goodsInfo">
				<!--分享到平台-->
				<view class="share-plat">
					<view class="plat-list">
						<view class="plat-item" @tap="shareToPlat('weixin')">
							<image class="image wechat" src="@/static/images/goods/wechat.png" />
							<text class="text">微信好友</text>
						</view>
						<view class="plat-item" @tap="shareToPlat('weixinTimeline')">
							<image class="image moments" src="@/static/images/goods/moments.png" />
							<text class="text">朋友圈</text>
						</view>
						<!-- <view class="plat-item" @tap="shareToPlat('qqFriend')">
							<image class="image" src="@/static/images/goods/qq.png" />
							<text class="text">QQ</text>
						</view>
						<view class="plat-item" @tap="shareToPlat('qZone')">
							<image class="image" src="@/static/images/goods/zone.png" />
							<text class="text">QQ空间</text>
						</view> -->
						<view class="plat-item" @tap="savePicture">
							<image class="image save" src="@/static/images/goods/save.png" />
							<text class="text">保存本地</text>
						</view>
					</view>
					<view class="triangle"></view>
				</view>
			</view>
		</popup>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import Popup from '@/components/uni/Popup';
import UQRCode from '@/utils/packges/uQRCode';
import {
		mapGetters
	} from 'vuex';
export default {
	name: 'goods-share',
	components: {
		Popup
	},
	data() {
		return {
			options: {},
			images: [],
			message: '',
			goodsInfo: {},
			tkl: null,
			visible: false,
			imgUrl: null,
			shareLink: '',
			shareUrl: '',
			shareQr: 'https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200707/bc9e94d0-c01f-11ea-b644-f581436ada8e.png',
			selectNum: 2
		};
	},
	onLoad(options) {
		this.options = options;
		this.init();
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	computed: {
		...mapGetters(['permInfo'])
	},
	methods: {
		init() {
			uni.showLoading({
				title: '加载中'
			});
			if (this.options.type === 'superGoods') {
				this.goodsInfo = uni.getStorageSync('goodsInfo');
				this.goodsInfo.endPrice = Number(this.goodsInfo.endPrice).toFixed(2);
				this.goodsInfo.price = Number(this.goodsInfo.price).toFixed(2);

				// 加载轮播图
				if (this.goodsInfo.taobaoImage) {
					let list = this.goodsInfo.taobaoImage.split(',');
					let tempArr = [];
					for (let i = 0; i < list.length; i++) {
						tempArr.push({
							imgUrl: list[i],
							selectFlag: false
						});
					}
					this.images = tempArr;
				} else {
					this.images = [
						{
							imgUrl: this.goodsInfo.pic,
							selectFlag: false
						}
					];
				}
				this.images[0].selectFlag = true;
				this.imgUrl = this.images[0].imgUrl;
				this.getPrivilege();
				
				// 自定义统计上报
				let channel;
				if (plus.runtime.channel === 'yyb') {
					channel = '应用宝'
				} else if (plus.runtime.channel === 'vivo') {
					channel = 'vivo应用市场'
				} else if (plus.runtime.channel === 'oppo') {
					channel = 'oppo应用市场'
				} else if (plus.runtime.channel === 'xiaomi') {
					channel = '小米商店'
				} else if (plus.runtime.channel === 'huawei') {
					channel = '华为商店'
				} else {
					channel = '默认渠道'
				}
				uni.report(
					'title',
					'进入超级搜商品分享页：' +
						this.options.title +
						'-来源：' + channel
				);
			} else {
				let params = {
					gid: this.options.gid
				};
				this.$service.shopping.goods.detail(params).then(res => {
					this.goodsInfo = res;
					this.goodsInfo.endPrice = Number(this.goodsInfo.endPrice).toFixed(2);
					this.goodsInfo.price = Number(this.goodsInfo.price).toFixed(2);

					// 加载轮播图
					if (this.goodsInfo.taobaoImage) {
						let list = this.goodsInfo.taobaoImage.split(',');
						let tempArr = [];
						for (let i = 0; i < list.length; i++) {
							tempArr.push({
								imgUrl: list[i],
								selectFlag: false,
								posterFlag: false,
							});
						}
						this.images = tempArr;
					} else {
						this.images = [
							{
								imgUrl: this.goodsInfo.pic,
								selectFlag: false
							}
						];
					}
					this.images[0].selectFlag = true;
					this.images[0].posterFlag = true;
					this.imgUrl = this.images[0].imgUrl;
					this.getPrivilege();
				});
				
				// 自定义统计上报
				let channel;
				if (plus.runtime.channel === 'yyb') {
					channel = '应用宝'
				} else if (plus.runtime.channel === 'vivo') {
					channel = 'vivo应用市场'
				} else if (plus.runtime.channel === 'oppo') {
					channel = 'oppo应用市场'
				} else if (plus.runtime.channel === 'xiaomi') {
					channel = '小米商店'
				} else if (plus.runtime.channel === 'huawei') {
					channel = '华为商店'
				} else {
					channel = '默认渠道'
				}
				uni.report(
					'title',
					'进入普通商品分享页：' +
						this.options.title +
						'-来源：' + channel
				);
			}
		},
		// 获取高佣转链
		getPrivilege() {
			let params = {
				title: this.goodsInfo.title,
				itemId: this.goodsInfo.gid
			};
			this.$service.shopping.taobao.privilege(params).then(res => {
				if (res.tkl) {
					this.goodsInfo.tkl = res.tkl;
				}

				// 生成优惠券短链
				this.$service.shopping.taobao
					.shortUrl({
						url: res.coupon_click_url
					})
					.then(res => {
						this.goodsInfo.url = res;

						this.getShareTemplate();
					});
			});
		},
		// 获取分享文案
		getShareTemplate() {
			this.$service.shopping.shareTemplate
				.template({
					type: 1,
					playform: 1
				})
				.then(async (res) => {
					let template = res;
					let newTemplate = '';
					template.split('{').forEach(item => {
						let t = item.split('}');
						if (t.length === 2) {
							newTemplate += this.goodsInfo[t[0]];
							newTemplate += t[1];
						} else {
							newTemplate += item;
						}
					});
					this.message = newTemplate;
					
					// 获取分享链接
					let shareUrl = await this.$service.shopping.goods.shareUrl();
					shareUrl =
						shareUrl +
						'?title=' +
						this.goodsInfo.title +
						'&pic=' +
						this.imgUrl +
						'&endPrice=' +
						Number(this.goodsInfo.endPrice).toFixed(2) +
						'&price=' +
						Number(this.goodsInfo.price).toFixed(2) +
						'&sale=' +
						this.goodsInfo.sale +
						'&tkl=' +
						this.goodsInfo.tkl +
						'&couponMoney=' +
						this.goodsInfo.couponMoney;
						
					// 生成分享短链
					this.$service.shopping.taobao
						.shortUrl({
							url: shareUrl
						})
						.then(res => {
							this.shareUrl = res;
							
							UQRCode.make({
								canvasId: 'qrcode',
								componentInstance: this,
								text: this.shareUrl,
								size: 50,
								margin: 0,
								backgroundColor: '#ffffff',
								foregroundColor: '#000000',
								fileType: 'png',
								correctLevel: UQRCode.defaults.correctLevel,
								success: res => {
									this.shareQr = res;
									uni.hideLoading();
								},
							});
						});
				});
		},
		// 选择二维码主图
		selectPoster(item) {
			if (item.posterFlag) {
				item.posterFlag = !item.posterFlag;
			} else {
				this.images.forEach(itm => {
					itm.posterFlag = false;
				});
				item.posterFlag = true;
			}
			this.imgUrl = item.imgUrl;
		},
		// 选择取消图片
		selectPicture(item) {
			item.selectFlag = !item.selectFlag;
			
			this.selectNum = 1;
			this.images.forEach(itm => {
				if (itm.selectFlag === true) {
					this.selectNum++;
				}
			})
		},
		copyValue() {
			uni.setClipboardData({
				data: this.message
			});
		},
		createCanvas() {
			// 店铺区分
			let shopIcon;
			if (this.goodsInfo.shoptype === 0) {
				// 淘宝
				shopIcon = 'https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200707/2bac04b0-c003-11ea-ba16-49a1b1d71eeb.png';
			} else if (this.goodsInfo.shoptype === 1) {
				// 天猫
				shopIcon = 'https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200707/424aba90-c003-11ea-b1c3-8f314d25368b.png';
			} else if (this.goodsInfo.shoptype === 2) {
				// 京东
				shopIcon = 'https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200707/4a439780-c003-11ea-8b38-2f29b16ee45d.png';
			} else {
				// 拼多多
				shopIcon = 'https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200707/519203a0-c003-11ea-8f5b-a5e135246d66.png';
			}
			
			const ctx = uni.createCanvasContext('myCanvas');
			// 绘制背景色
			ctx.fillStyle = '#FFFFFF';
			ctx.fillRect(0, 0, 750, 1334);
			// 绘制平台图标
			uni.downloadFile({
				url: shopIcon,
				success: iconRes => {
					if (iconRes.statusCode === 200) {
						ctx.drawImage(iconRes.tempFilePath, 18, 18, 48, 48);
						
						// 绘制商品标题
						ctx.setFillStyle('#171717');
						ctx.setFontSize(36);
						if (this.goodsInfo.title.length <= 17) {
							ctx.fillText(this.goodsInfo.title, 80, 55);
						} else {
							if (this.goodsInfo.title.length > 34) {
								ctx.fillText(this.goodsInfo.title.substring(0, 17), 80, 55);
								ctx.fillText(this.goodsInfo.title.substring(17, 34) + '...', 18, 108);
							} else {
								ctx.fillText(this.goodsInfo.title.substring(0, 18), 80, 55);
								ctx.fillText(this.goodsInfo.title.substring(18, this.goodsInfo.title.length), 18, 108);
							}
						}
						
						// 绘制券后价
						ctx.setFillStyle('#F70114');
						ctx.fillText('券后价¥', 18, 200);
						ctx.setFontSize(60);
						ctx.fillText(Number(this.goodsInfo.endPrice).toFixed(2), 150, 200);
			
						// 绘制原价
						ctx.setTextAlign('left');
						ctx.setFontSize(28);
						ctx.setFillStyle('#B5B5B5');
						ctx.fillText('原价 ¥' + Number(this.goodsInfo.price).toFixed(2), 18, 260);
						ctx.fillText('————', 100, 260);
						
						// 获取优惠券背景
						uni.downloadFile({
							url: 'https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200707/c90e1f10-c01a-11ea-89ba-79b729190266.png',
							success: couponRes => {
								if (couponRes.statusCode === 200) {
									ctx.drawImage(couponRes.tempFilePath, 602, 158, 124, 62);
									
									ctx.setFontSize(22);
									ctx.setFillStyle('#FFFFFF');
									ctx.setTextAlign('center');
									ctx.fillText('¥' + this.goodsInfo.couponMoney, 654, 200);
									
									// 绘制大图边框
									ctx.fillStyle = '#F73D3E';
									ctx.fillRect(18, 342, 714, 714);
									
									// 绘制商品大图
									uni.downloadFile({
										url: this.imgUrl,
										success: imgUrlRes => {
											if (imgUrlRes.statusCode === 200) {
												ctx.drawImage(imgUrlRes.tempFilePath, 31, 355, 688, 688);
												
												// 绘制下单教程
												uni.downloadFile({
													url: 'https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200707/e5a23960-c01d-11ea-99f2-95f2a3dd5efc.png',
													success: teachRes => {
														if (teachRes.statusCode === 200) {
															ctx.drawImage(teachRes.tempFilePath, 18, 1102, 452, 214);
															
															// 绘制二维码
															uni.downloadFile({
																url: 'https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200707/bc9e94d0-c01f-11ea-b644-f581436ada8e.png',
																success: codeRes => {
																	if (codeRes.statusCode === 200) {
																		ctx.drawImage(codeRes.tempFilePath, 548, 1132, 184, 184);
																		
																		ctx.draw(false, () => {
																			// 绘制完成
																			uni.canvasToTempFilePath({
																				x: 0,
																				y: 0,
																				width: 750,
																				height: 1334,
																				destWidth: 750,
																				destHeight: 1334,
																				canvasId: 'myCanvas',
																				success: res => {
																					
																				}
																			});
																		});
																	}
																},
															});
														}
													},
												});
												
											}
										},
									});
								}
							},
						})
					}
				},
			});
		},
		// 获取分享海报
		async getSharePic() {
			// 读取选中图片
			// let imgUrl = null;
			// this.images.forEach(item => {
			// 	if (item.selectFlag === true) {
			// 		imgUrl = item.imgUrl;
			// 	}
			// });
			// if (!imgUrl) {
			// 	uni.showToast({
			// 		title: '请选择海报封面图',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			// 开始创建
			uni.showLoading({
				title: '创建海报中...',
				mask: true
			});
				
			let params = {
				shoptype: this.goodsInfo.shoptype,
				goodPic: this.imgUrl,
				title: this.goodsInfo.title,
				endPrice: this.goodsInfo.endPrice,
				couponMoney: this.goodsInfo.couponMoney,
				price: this.goodsInfo.price,
				link: this.shareUrl,
			}
			this.$service.common.common.sharePic(params).then(res => {
				this.shareLink = res;
				uni.hideLoading();
				this.$refs.poster.open();
			})
		},
		close() {
			this.$refs.poster.close();
		},
		// 保存图片到本地
		savePicture() {
				uni.downloadFile({
				    url: this.shareLink,
				    success: (res) =>{
				        if (res.statusCode === 200){
				            uni.saveImageToPhotosAlbum({
				                filePath: res.tempFilePath,
				                success: function() {
				                    uni.showToast({
				                        title: "图片已保存",
				                        icon: "none"
				                    });
				                },
				                fail: function() {
				                    uni.showToast({
				                        title: "保存失败",
				                        icon: "none"
				                    });
				                }
				            });
				        } 
				    }
				})
				let pictures = [];
				
				// 获取选中图
				this.images.forEach(item => {
					if (item.selectFlag === true) {
						pictures.push(item.imgUrl);
					}
				});
				// 静默保存
				pictures.forEach(item => {
					uni.downloadFile({
					    url: item,
					    success: (res) =>{
					        if (res.statusCode === 200){
					            uni.saveImageToPhotosAlbum({
					                filePath: res.tempFilePath,
					                success: function() {
					                    
					                },
					                fail: function() {
					                    
					                }
					            });
					        } 
					    }
					})
				})
		},
		// 分享到平台
		shareToPlat(type) {
			uni.showLoading({
				title: '正在启动分享...',
				mask: true
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 5000)
			if (type === 'weixin') {
				if (plus.os.name == 'iOS') {
					let pictures = [];
					pictures.push(this.shareLink);
					
					// 获取选中图
					this.images.forEach(item => {
						if (item.selectFlag === true) {
							pictures.push(item.imgUrl);
						}
					});
					
					plus.share.sendWithSystem({
						type: 'image',
						pictures: pictures
					}, function() {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					}, function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					});
				} else {
					uni.share({
					    provider: "weixin",
					    scene: "WXSceneSession",
					    type: 2,
						imageUrl: this.shareLink,
					    success: function (res) {
							uni.showToast({
								title: '分享成功',
								icon: 'none'
							})
					    },
					    fail: function (err) {
							uni.showToast({
								title: '分享失败',
								icon: 'none'
							})
					    }
					});
				}
			} else if (type === 'weixinTimeline') {
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 2,
				    imageUrl: this.shareLink,
				    success: function (res) {
				       uni.showToast({
				       	title: '分享成功',
				       	icon: 'none'
				       })
				    },
				    fail: function (err) {
				        uni.showToast({
				        	title: '分享失败',
				        	icon: 'none'
				        })
				    }
				});
			}
			// if (type === 'weixin') {
			// 	uni.share({
			// 	    provider: "weixin",
			// 	    scene: "WXSceneSession",
			// 	    type: 2,
			// 		imageUrl: this.shareLink,
			// 	    success: function (res) {
			// 			uni.showToast({
			// 				title: '分享成功',
			// 				icon: 'none'
			// 			})
			// 	    },
			// 	    fail: function (err) {
			// 			uni.showToast({
			// 				title: '分享失败',
			// 				icon: 'none'
			// 			})
			// 	    }
			// 	});
			// }
		},
		onBlur(e) {
			this.message = e.detail.value;
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #f6f7fa;
	min-height: 100vh;
	padding-bottom: 200rpx;
	padding-top: 80rpx;
	.share-fixed {
		width: 100%;
		background: #f6f7fa;
		position: fixed;
		top: 0;
		left: 0;
		height: 112rpx;
		z-index: 100;
		.share-profit {
			background: $color-white;
			text-align: center;
			width: 690rpx;
			height: 60rpx;
			margin: 26rpx auto 0;
			border-radius: 30rpx;
			color: #a77424;
			font-size: 28rpx;
			@include flexBox(flex-start, center);
			.image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				margin-right: 12rpx;
			}
		}
	}
	.select-images {
		width: 690rpx;
		margin: 26rpx auto 0;
		background: #fff;
		border-radius: 16rpx;
		padding: 18rpx;
		.section-title {
			color: $text-black;
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
			@include flexBox(flex-start);
			.line {
				height: 28rpx;
				width: 4rpx;
				border-radius: 8rpx;
				background: $main-color;
			}
			.text {
				margin-left: 14rpx;
			}
		}
		.images-list {
			width: 100%;
			@include flexBox(space-between, flex-start);
			.left {
				width: 280rpx;
				border: 2rpx dashed #D6D6D6;
				padding: 10rpx;
				position: relative;
				@include flexBox(space-between, null, column);
				.select-flag {
					width: 34rpx;
					height: 34rpx;
					border-radius: 50rpx;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					opacity: 1;
					background: $main-color;
					@include flexBox(center, center);
					.icon-gou {
						color: #fff;
						font-size: 24rpx;
					}
				}
				.title {
					@include ellipsis(2);
					color: #171717;
					font-size: 20rpx;
					margin-bottom: 10rpx;
					.shop-type {
						width: 22rpx;
						height: 22rpx;
						margin-right: 6rpx;
					}
				}
				.price-coupon {
					@include flexBox(space-between, center);
					.price {
						margin-bottom: 10rpx;
						@include flexBox(null, null, column);
						.end-price {
							font-size: 18rpx;
							color: $main-color;
							.text {
								font-size: 24rpx;
							}
						}
						.old-price {
							color: #B5B5B5;
							font-size: 14rpx;
							.text {
								text-decoration: line-through; 
							}
						}
					}
					.coupon {
						width: 90rpx;
						height: 40rpx;
						line-height: 40rpx;
						position: relative;
						color: #fff;
						.image {
							position: absolute;
							width: 100%;
							height: 100%;
						}
						.text {
							position: relative;
							font-size: 20rpx;
							text-align: center;
							margin-left: -10rpx;
						}
					}
				}
				.pic-box {
					width: 260rpx;
					height: 260rpx;
					padding: 6rpx;
					position: relative;
					margin-bottom: 10rpx;
					.image {
						width: 100%;
						height: 100%;
						border: 4rpx solid $main-color;
					}
					.price {
						padding: 0rpx 30rpx;
						background:linear-gradient(1deg,rgba(246,36,38,1) 0%,rgba(255,104,104,1) 100%);
						border-radius:8rpx 36rpx 0rpx 36rpx;
						font-size: 16rpx;
						color: #FDEBCC;
						position: absolute;
						right: 6rpx;
						bottom: 6rpx;
						text-align: center;
						.text {
							font-size: 28rpx;
						}
					}
				}
				.qr-code {
					@include flexBox(space-between, flex-end);
					.teach {
						width: 162rpx;
						height: 72rpx;
					}
					.code {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
			.right {
				width: 374rpx;
				@include flexBox(flex-start, null, null, wrap);
				.images-item {
					width: 174rpx;
					height: 174rpx;
					position: relative;
					margin-left: 10rpx;
					margin-bottom: 10rpx;
					.image {
						width: 178rpx;
						height: 178rpx;
					}
					.select-flag {
						width: 34rpx;
						height: 34rpx;
						border-radius: 50rpx;
						transition: 0.5s;
						background: #B2B2B2;
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						@include flexBox(center, center);
						.icon-gou {
							color: #fff;
							font-size: 24rpx;
						}
					}
					&.active {
						.select-flag {
							opacity: 1;
							background: $main-color;
						}
					}
				}
			}
		}
		.footer {
			margin-top: 34rpx;
			@include flexBox(space-between, center);
			.left {
				font-size: 32rpx;
				.text {
					color: $main-color;
					margin: 0 4rpx;
				}
			}
			.change-qr {
				font-size: 24rpx;
				padding: 12rpx 26rpx;
				background: $main-color;
				color: #fff;
				border-radius: 50rpx;
			}
		}
	}
	.share-tips {
		width: 690rpx;
		margin: 26rpx auto 0;
		background: #fff;
		border-radius: 16rpx;
		padding: 18rpx;
		.section-title {
			color: $text-black;
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
			@include flexBox(flex-start);
			.line {
				height: 28rpx;
				width: 4rpx;
				border-radius: 8rpx;
				background: $main-color;
			}
			.text {
				margin-left: 14rpx;
			}
		}
		.text-area {
			width: 100%;
			background: #FFF5F5;
			border-radius: 28rpx;
			padding: 16rpx 12rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #545454;
			min-height: 348rpx;
		}
		.share-desc {
			font-size: 28rpx;
			margin-top: 30rpx;
			@include flexBox(flex-end);
			.copy {
				color: #fff;
				padding: 12rpx 28rpx;
				background: $main-color;
				font-size: 24rpx;
				border-radius: 50rpx;
			}
		}
	}
	.share-footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		padding-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		@include flexBox(center, center);
		.create-share {
			width: 672rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			background: #f71011;
			border-radius: 50rpx;
			color: $color-white;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
}
.change-popup {
	.main {
		position: relative;
		width: 598rpx;
		height: 896rpx;
		background: #fff;
		border-radius: 16rpx;
		.top {
			color: #000;
			padding: 20rpx 30rpx;
			font-size: 30rpx;
			@include flexBox(space-between, center);
			.iconfont {
				font-size: 36rpx;
				font-weight: 600;
			}
			.save {
				color: $main-color;
			}
		}
		.center {
			white-space:nowrap;
			.img-box {
				width: 140rpx;
				height: 140rpx;
				margin: 0 10rpx;
				display: inline-block;
				position: relative;
				.image {
					width: 140rpx;
					height: 140rpx;
				}
				.select-flag {
					width: 34rpx;
					height: 34rpx;
					border-radius: 50rpx;
					transition: 0.5s;
					background: #B2B2B2;
					position: absolute;
					right: 4rpx;
					top: 4rpx;
					@include flexBox(center, center);
					.icon-gou {
						color: #fff;
						font-size: 24rpx;
					}
				}
				&.active {
					.select-flag {
						opacity: 1;
						background: $main-color;
					}
				}
			}
		}
		.footer {
			width: 422rpx;
			height: 580rpx;
			margin: 30rpx auto;
			border: 2rpx dashed #D6D6D6;
			padding: 20rpx;
			@include flexBox(space-between, null, column);
			.title {
				@include ellipsis(2);
				color: #171717;
				font-size: 20rpx;
				.shop-type {
					width: 22rpx;
					height: 22rpx;
					margin-right: 6rpx;
				}
			}
			.price-coupon {
				@include flexBox(space-between, center);
				.price {
					@include flexBox(null, null, column);
					.end-price {
						font-size: 18rpx;
						color: $main-color;
						.text {
							font-size: 24rpx;
						}
					}
					.old-price {
						color: #B5B5B5;
						font-size: 14rpx;
						.text {
							text-decoration: line-through; 
						}
					}
				}
				.coupon {
					width: 90rpx;
					height: 40rpx;
					line-height: 40rpx;
					position: relative;
					color: #fff;
					.image {
						position: absolute;
						width: 100%;
						height: 100%;
					}
					.text {
						position: relative;
						font-size: 20rpx;
						text-align: center;
						margin-left: -10rpx;
					}
				}
			}
			.pic-box {
				width: 378rpx;
				height: 378rpx;
				background: $main-color;
				padding: 6rpx;
				position: relative;
				.image {
					width: 100%;
					height: 100%;
				}
				.price {
					padding: 10rpx 30rpx;
					background:linear-gradient(1deg,rgba(246,36,38,1) 0%,rgba(255,104,104,1) 100%);
					border-radius:8rpx 36rpx 0rpx 36rpx;
					font-size: 18rpx;
					color: #FDEBCC;
					position: absolute;
					right: 0;
					bottom: 0;
					text-align: center;
					.text {
						font-size: 32rpx;
					}
				}
			}
		}
	}
}
.poster-popup {
	@include flexBox(center, space-between, column);
	.share-plat {
		width: 690rpx;
		margin: 0 auto;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 116rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.share-title {
			font-size: 28rpx;
			color: #000;
			@include flexBox(space-between, center);
			.line {
				width: 260rpx;
				height: 2rpx;
				background: #e7e7e7;
			}
		}
		.plat-list {
			border-radius: 32rpx;
			padding: 40rpx 0;
			background: $color-white;
			@include flexBox(space-around);
			.plat-item {
				width: 120rpx;
				text-align: center;
				z-index: 2;
				color: #8E8E8E;
				.wechat {
					width: 60rpx;
					height: 50rpx;
				}
				.moments {
					width: 50rpx;
					height: 50rpx;
				}
				.save {
					width: 48rpx;
					height: 40rpx;
				}
				.text {
					margin-top: 10rpx;
					font-size: 22rpx;
					display: block;
				}
			}
		}
		.triangle {
			width: 80rpx;
			height: 80rpx;
			background: #fff;
			border-radius: 16rpx;
			transform: rotate(45deg);
			margin: -60rpx auto 0;
			z-index: 1;
		}
	}
}
.canvas-box {
	width: 100%;
	overflow-x: auto;
	background: #ccc;
}
</style>
